<template>
  <el-card shadow="never">
    <div slot="header">
      <el-button @click="$router.push({name: 'satisfactionScheme' })">返回</el-button>
    </div>
    <el-steps
      finish-status="success"
      style="display:flex; justify-content: center;"
      :space="200"
      class="mb20"
      align-center
      :active="active"
    >
      <el-step title="基本信息"></el-step>
      <el-step title="评价内容"></el-step>
      <el-step title="评价方"></el-step>
      <el-step v-show="internalPlanType === 1 || internalPlanType === 4" title="被评价方"></el-step>
      <el-step title="评价等级"></el-step>
      <el-step title="完成"></el-step>
    </el-steps>
    <el-card :style="active === 0 ? cardStyle  : ''" shadow="never">
      <div slot="header" class="clearfix" style="text-align: center">
        <span>{{ computedWord(active) }}</span>
      </div>
      <plan-form
        @planType="handlePlanType"
        @targetMode="handleTargetMode"
        @executorMode="handleExecutorMode"
        @listData="handleListData"
        @postData="handlePostData"
        @notSubmit="handleNotSubmit"
        v-show="active === 0"
        ref="planForm"
      />
      <second-transfer
        @notSubmit="handleNotSubmit"
        @postData="handlePostData"
        @postArrData="handlePostArrData"
        v-show="active === 1"
        ref="secondTransfer"
      />
      <third-transfer
        @notSubmit="handleNotSubmit"
        @postData="handlePostData"
        v-show="active === 2"
        ref="thirdTransfer"
      />
      <fourth-transfer
        @notSubmit="handleNotSubmit"
        @postData="handlePostData"
        v-show="active === 3 && ( internalPlanType === 1 || internalPlanType === 4 )"
        ref="fourthTransfer"
      />
      <five-comp
        @notSubmit="handleNotSubmit"
        @postData="handlePostData"
        v-show="active === 4"
        ref="fiveComp"
      />
      <six-comp v-show="active === 6" ref="sixComp" />
    </el-card>
    <div class="mt20" style="overflow: hidden">
      <el-button class="fl" type="primary" v-show="active > 0 && active < 5" @click="handlePre">上一步</el-button>
      <el-button class="fr" type="primary" v-show="active < 4" @click="handleNext">下一步</el-button>
      <el-button class="fr" type="primary" v-show="active === 4" @click="handleSubmit">提交</el-button>
    </div>
  </el-card>
</template>

<script>
import PlanForm from './Form'
import SecondTransfer from './SecondTransfer'
import ThirdTransfer from './ThirdTransfer'
import FourthTransfer from './FourthTransfer'
import FiveComp from './FiveComp'
import SixComp from './SixComp'
import { getDetail } from '@/api/eval'
import { planCreate } from '@/api/satisfaction'
import { getSession, setSession, removeSession } from '@/utils/util'

export default {
  components: {
    PlanForm,
    SecondTransfer,
    ThirdTransfer,
    FourthTransfer,
    FiveComp,
    SixComp
  },
  data() {
    return {
      param: {
        internalPlan: {},
        internalPlanItemList: [],
        internalPlanExecutorList: [],
        internalPlanTargetList: [],
        internalPlanLevelList: []
      },
      cardStyle: {
        width: '800px',
        margin: '0 auto'
      },
      secondArrData: [],
      active: 0,
      first: true,
      second: true,
      third: true,
      fourth: true,
      fifth: true,
      row: this.$route.params.row || getSession('evaluateCreateRow'),
      type: this.$route.params.type,
      internalPlanType: null
    }
  },
  async mounted() {
    console.log('evaluateCreateRow', this.row)
    if (this.row) {
      this.$refs.planForm.setObj(this.row)
      this.$refs.secondTransfer.parSetArr(this.row.internalPlanItemList)
      this.$refs.thirdTransfer.setArr(this.row.internalPlanExecutorList)
      this.$refs.fourthTransfer.setArr(this.row.internalPlanTargetList)
      this.$refs.fiveComp.setArr(this.row.internalPlanLevelList)
    }
  },
  methods: {
    handlePlanType(num) {
      console.log('planType', num)
      this.internalPlanType = num
      // 向第二步传递选择的类型值
      this.$refs.secondTransfer.postType(num)
    },
    // 第二步到第一步，改变数据时，传递第二步的 toData 数据给 第一步的表单暂存起来
    handlePostArrData(arr) {
      this.$refs.planForm.saveArr(arr)
    },
    // 获取第一个表单选择的考评模块
    handleListData(arr) {
      this.secondArrData = arr
    },
    // 监听被评价方变化
    handleTargetMode(n) {
      this.$refs.fourthTransfer.getData(n)
    },
    // 监听评价方变化
    handleExecutorMode(n) {
      this.$refs.thirdTransfer.getData(n)
    },
    // 提交事件处理
    async handleSubmit() {
      if (this.active === 4) {
        this.$refs.fiveComp.postData()
      }
      if (this.first && this.second && this.third && this.fourth && this.fifth) {
        // let res = ''
        // if (this.type === 'add') {
        const res = await planCreate(this.param)
        if (res.state === '000000') {
          this.active = 6
        }
      }
    },
    computedWord(num) {
      let str = ''
      switch (num) {
        case 0:
          str = '评价方案基本信息'
          break
        case 1:
          str = '评价项目'
          break
        case 2:
          str = '评价方'
          break
        case 3:
          str = '被评价方'
          break
        case 4:
          str = '评价等级'
          break
        default:
          break
      }
      return str
    },
    handlePostData(bool = true, obj, num) {
      if (num === 1) {
        this.first = bool
        this.$set(this.param, 'internalPlan', obj)
      } else if (num === 2) {
        this.second = bool
        this.$set(this.param, 'internalPlanItemList', obj)
      } else if (num === 3) {
        this.third = bool
        this.$set(this.param, 'internalPlanExecutorList', obj)
      } else if (num === 4) {
        this.fourth = bool
        this.$set(this.param, 'internalPlanTargetList', obj)
      } else {
        console.log('fifth obj', obj)

        this.fifth = true
        this.$set(this.param, 'internalPlanLevelList', obj)
      }
    },
    handleNotSubmit(num) {
      if (num === 1) {
        this.first = false
      } else if (num === 2) {
        this.second = false
      } else if (num === 3) {
        this.third = false
      } else if (num === 4) {
        this.fourth = false
      } else {
        this.fifth = false
      }
    },
    handlePre() {
      if (this.active === 1) {
        this.$refs.secondTransfer.getArrData()
      }
      if ((this.internalPlanType === 2 || this.internalPlanType === 3) && this.active === 4) {
        this.active = this.active - 2
      } else {
        this.active = this.active - 1
      }
      if (this.active <= 0) {
        this.active = 0
      }
    },
    handleNext() {
      if (this.active === 0) {
        this.$refs.planForm.postData()
        this.$refs.secondTransfer.setArr(this.secondArrData)
      }
      if (this.active === 1) {
        this.$refs.secondTransfer.postData()
      }
      if (this.active === 2) {
        this.$refs.thirdTransfer.postData()
      }
      if (this.active === 3) {
        this.$refs.fourthTransfer.postData()
      }
      if (this.first && this.second && this.third && this.fourth && this.fifth) {
        if ((this.internalPlanType === 2 || this.internalPlanType === 3) && this.active === 2) {
          this.active += 2
        } else {
          this.active += 1
        }
        if (this.active >= 4) {
          this.active = 4
        }
      }
    }
  },
  destroyed() {
    removeSession('evaluateCreateRow')
    // removeSession('evaluateCreateType')
  }
}
</script>